import './CommentItem.scss';
import React from 'react';
import { connect } from 'react-redux';
import StarScore from 'component/StarScore/StarScore';
import { formatTime } from '../../../../../utils/index'

class CommentItem extends React.Component {

  /**
   * 渲染图片数组
   * @param {*} item 
   * @returns 
   */
  renderImgs(item) {
    let imgs = item.comment_pics || [];
    if (imgs.length) {
      return (
        <div className="img-content clearfix">
          {imgs.map((item, index) => {
            let src = item.url;
            let style = {
              backgroundImage: 'url(' + src + ')'
            }
            return <div key={index} className={'img-item'} style={style}></div>
          })}
        </div>
      )
    } else {
      return null;
    }
  }
  renderTags(label) {
    return label.map((item) => {
      return item.content + '，'
    });
  }

  render() {
    let item = this.props.data;
    return (
      <div className="comment-item">
        <div className="comment-time">{formatTime(item.comment_time)}</div>
        <img className="avatar" src={item.user_pic_url || 'https://img.51miz.com/Element/00/88/08/84/72f298b9_E880884_d0f63115.png'} />
        <div className="item-right">
          <p className="nickname">{item.user_name}</p>
          <div className="star-and-time">
            <div className="star-content"><StarScore score={item.order_comment_score} /></div>
            <div className="send-time">{item.ship_time + '分钟送达'}</div>
          </div>
          <div className="comment-text">{item.comment}</div>
          {this.renderImgs(item)}
          {item.praise_food_tip ? <div className="like-info">{item.praise_food_tip}</div> : null}
          {item.comment_labels.length ? <div className="tag-info">{this.renderTags(item.comment_labels)}</div> : null}
        </div>
      </div>
    );
  }
}

export default connect()(CommentItem);

